import 'antd/dist/antd.css';
import React, {useEffect, useState} from 'react'
import {Descriptions, Image, Table} from "antd";
import Factory from "@/models/factory";
import Header1 from "@/pages/FactoryDetail/components/Header1";

export interface FactoryDetailProps {
  factory: any,
}

const FactoryDetail: React.FC = (props) => {
  const [fac, setFac] = useState<any>(null)
  const id = props.match.params.id

  useEffect(() => {
    fetch(`http://127.0.0.1:8000/api/factories/${id}`)
      .then(async res => {
        const fac_tmp = await res.json()
        setFac(new Factory(fac_tmp))
      })
  }, [])

  const Item = ({title, text}: {title: string, text: string}) => {
    return (
      <div style={{
      display: 'flex'
      }}>
        <div>{title}</div>
        <div>{text}</div>
      </div>
    )
  }

  const isProofingStr = (fac) => {
    const val = fac?.profileData()?.isProofing?.value
    if (val) {
      if (val === "true") {
        return "是"
      }
      return "否"
    }
    return "未获取到"
  }

  // const licenses = fac?.doc_for_pc?.data?.patentMap?.factoryControlOtherLicenses
  return (
    <div>
      <Header1 title={"基础信息"}/>
      <Descriptions title={""} bordered={true} column={2}>
        <Descriptions.Item label="商家名称">{fac?.facName()?? ""}</Descriptions.Item>
        <Descriptions.Item label="合作状态">{'未知'}</Descriptions.Item>
      </Descriptions>

      <Header1 title={'工厂档案'} hasMargin={true}/>
      <Descriptions bordered={true} column={2}>
        {/*<Descriptions.Item label={"成立时间"}>{fac?.esData()?? '未处理'}</Descriptions.Item>*/}
        <Descriptions.Item label={"成立时间"}>{'未处理'}</Descriptions.Item>
        <Descriptions.Item label={"年交易额"}>{fac?.annualTradeVolume()?? '未采集到'}</Descriptions.Item>
        <Descriptions.Item label={"厂房面积"}>{fac?.profileData()?.factoryControlAcreage?.value?? "未获取到"}</Descriptions.Item>
        <Descriptions.Item label={"员工人数"}>{fac?.profileData()?.workerNum2?.value?? "未获取到"}</Descriptions.Item>
        <Descriptions.Item label={"支持打样"}>{isProofingStr(fac)}</Descriptions.Item>
      </Descriptions>

      <h2>综合概述</h2>
      <div>{fac?.facProfile()?? ""}</div>

      <h2>车间设备</h2>
      <div>
        {fac?.doc_for_pc?.data?.productInfo?.productLinePics?.map(pic => (
          <Image
            width={200}
            height={200}
            src={pic}
          ></Image>
        ))}
      </div>

      <h2>合作方式</h2>
      <div>
      {fac?.doc_for_pc?.data?.patentMap?.factoryControlOtherLicenses?.map(item =>
        (
          <div>
            <div>{item.certName}</div>
            <Image src={item.pic} width={100} height={100}/>
          </div>
        )
      )?? <div>无资质文件</div>}
      </div>

    </div>
  );
}

export default FactoryDetail
